<template>
  <div class="UploadRaiders" ref="homePage">
    <van-nav-bar title="上传攻略" left-arrow @click-left="onClickLeft" />
    <div style="width: 100%;height: 46px;"></div>
    <div class="upload">
      <div class="title">
        <van-cell-group>
          <van-field v-model="title" rows="1" autosize type="textarea" placeholder="添加标题" />
        </van-cell-group>
      </div>
      <div class="content">
        <van-cell-group>
          <van-field v-model="content" rows="2" autosize type="textarea" placeholder="你的分享越详细就越容易让人种草，也更容易被推荐哦" show-word-limit />
        </van-cell-group>
      </div>
      <div class="position">
        <van-icon name="location" />
        <van-cell-group>
          <van-field v-model="position" rows="2" placeholder="你在那里" show-word-limit />
        </van-cell-group>
        <van-icon name="arrow" />
      </div>
      <div class="img">
        <p style="margin-bottom: 5px;">上传图片</p>
        <van-uploader v-model="fileList" multiple :max-count="2" />
      </div>

    </div>
    <div class="release">发布</div>
  </div>
</template>

<script>
export default {

  data () {
    return {
      clintHeigth: '', //获取页面高度
      title: '',
      content: '',
      position: '',
      fileList: [],
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    if (sessionStorage.getItem("city")) {
      this.current = sessionStorage.getItem("city")
    } else {
      this.mapinit()
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1);
    },
    mapinit () { //定位
      let that = this
      let map = new AMap.Map("container", {
        enableHighAccuracy: true,
        resizeEnable: true,
        center: [114.085947, 22.547],
        zoom: 8,
      });
      // document.getElementById('adcode').innerHTML = '当前城市adcode：' + map.getAdcode() + '<br>' +
      //   '当前中心点：' + map.getCenter()
      //获取用户所在城市信息
      function showCityInfo () {
        //实例化城市查询类
        let citysearch = new AMap.CitySearch();
        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function (status, result) {
          console.log(result)
          if (status === 'complete' && result.info === 'OK') {

            if (result && result.city && result.bounds) {
              // console.log(JSON.stringify(result));
              let cityinfo = result.city;
              let citybounds = result.bounds;
              that.position = cityinfo

              // document.getElementById('info').innerHTML = '您当前所在城市：' + cityinfo;
              //地图显示当前城市
              map.setBounds(citybounds);
            }
          } else {
            // document.getElementById('info').innerHTML = result.info;
            // console.log(result)
          }
        });
      }
      showCityInfo();
    },
  }
}
</script>

<style lang="scss">
.UploadRaiders {
  background: white;

  .van-nav-bar {
    border-bottom: 1px solid #e4e4e4;

    .van-nav-bar__left {
      .van-icon {
        color: #46d0ca;
        font-size: 18px;
      }
    }

    .van-nav-bar__title {
      color: #000000;
    }
  }

  .upload {
    .title {
      width: 90%;
      margin: 10px auto;
      border: 1px solid #797979;

      .van-cell {
        padding: 0;
      }
    }

    .content {
      width: 90%;
      height: 200px;
      margin: 10px auto;
      border: 1px solid #797979;

      .van-cell {
        padding: 0;
      }
    }

    .position {
      display: flex;
      width: 90%;
      margin: 10px auto;
      height: 40px;
      align-items: center;
      border-bottom: 1px solid #d9d9d9;
      .van-cell-group {
        width: 90%;
        height: 38px;
        display: flex;
        align-items: center;

        .van-cell {
          padding: 0;

          .van-field__control {
            border: none;
          }
        }
      }
    }
    .img {
      width: 90%;
      margin: 10px auto;
    }
  }
  .release {
    width: 130px;
    height: 40px;
    margin: 0 auto;
    border-radius: 8px;
    background: #46d0ca;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    color: white;
  }
}
</style>
